<template>
  <div class="Layout">
    <div class="Head Border-Bottom">时间函数</div>
    <div class="Body">
      <div class="Divide-2">
        <div>transition和animation都支持时间函数。可选值有：</div>
        <ul class="List">
          <li>ease</li>
          <li>ease-in</li>
          <li>ease-out</li>
          <li>ease-in-out</li>
          <li>linear</li>
          <li>step-start</li>
          <li>step-end</li>
          <li>cubic-bezier</li>
          <li>steps</li>
        </ul>
      </div>
      <div class="Divide-2">
        <iframe
          src="https://works-wings.oss-cn-hangzhou.aliyuncs.com/WebAnimationTricks/data/BreathHalo/page/Index.html"
          frameborder="0" width="400" height="400"></iframe>
      </div>
      <div class="Gap-S"></div>
      <div class="Subtitle">注意</div>
      <div>step由于在最初或最终态上的停留时间极端，动画效果可能与想象的不同</div>
      <img src="./image/timing-function-steps.png" height="250px">
    </div>
  </div>
</template>